<template>
  <div>
    <!-- 无id时, 可以使用index(反正也是就地更新) -->
    <div
      style="display: inline-block" v-for="(item,index) in arr" :key="index"
    >
      <input v-model="item.c" type="checkbox" />
      <span>{{ item.number }}</span>
    </div>
    <p>你选中的元素, 累加的值和为: {{sum}} </p>
  </div>
</template>

<script>
  /*
    需求：将用户点击选中的数字进行累加求和
      思路分析：
        1.用户点击的是什么?-->复选框
        2.进行累加的是什么?-->数字
        问题：如何让数字和点击的复选框关联起来?-->在同一个div中被循环生成,key值一样
        3.遍历arr判断复选框点击状态,若为true则将数字累加至sum,在计算属性中将累加的sum返回
  */ 
export default {
    data(){
        return {
            arr:[
            {number:9,c:false}, 
            {number:15,c:false},
            {number:19,c:false},
            {number:25,c:false},
            {number:29,c:false},
            {number:31,c:false},
            {number:48,c:false},
            {number:57,c:false},
            {number:62,c:false},
            {number:79,c:false},
            {number:87,c:false} 
            ]
        }
    },
    computed:{
        sum(){
            let addSum=0
            this.arr.forEach(item=>{
                if(item.c){
                    addSum+=item.number
                }
            })
            return addSum
        }
    }
};
</script>